import Checkbox from '@mui/material/Checkbox';
import { Link } from 'react-router-dom'

function useColumns({
    getCurrentPageKeys,
    getSelectedRows,
    setSelectedRows,
    onClickTitle
  }) {
  const onCheckAll = (e) => {
    const { checked } = e.target
    if (checked) {
      setSelectedRows(getCurrentPageKeys())
    } else {
      setSelectedRows([])
    }
  }

  const renderCheckAll = () => {
    const value = getSelectedRows().length 
      && getSelectedRows().length == getCurrentPageKeys().length
    return <Checkbox checked={value} onChange={onCheckAll}/>
  }

  const onCheck = (e, lid)=>{
    const { checked } = e.target
    if (checked) {
      const newKeys = getSelectedRows().concat([lid])
      // console.log(newKeys)
      setSelectedRows(newKeys)
    } else {
      const newKeys = getSelectedRows().filter(i => i!=lid)
      // console.log(newKeys)
      setSelectedRows(newKeys)
    }
  }

  const renderCheckbox = (lid, record) => {
    return (
      <Checkbox checked={
        getSelectedRows().includes(lid)
      }
        onChange={(e) => onCheck(e, lid)}
      />)
  }

  const renderTitle = (name, record, index)=>{
    return (
      <div>
        <Link to={`/jobList/detail/${index}`}>
          <label style={{color: 'blue'}} onClick={(e) => onClickTitle(record['lid'])}>
            <span>{record.brandName}</span>
            <span style={{color: 'red'}}>{record.salaryDesc}</span>
          </label>
        </Link>
      </div>
    )
  }

  const columns = [{
      title: renderCheckAll,
      dataIndex: 'lid',
      width: 40,
      render: renderCheckbox
    },
    {
      title: '标题',
      dataIndex: 'jobName',
      key: 'title',
      width: 210,
      render: renderTitle
    },
    {
      title: '职位',
      dataIndex: 'jobName',
      key: 'jobName',
      width: 160,
      render:(value, record)=>{
        return <div onClick={()=>{
          window.open('https://www.zhipin.com/job_detail/'+ record.lid +'.html', '_blank')
        }} style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace:'nowrap', color: 'blue'}}>{value}</div>
      }
    },
    {
      title: '类目',
      dataIndex: 'category',
      key: 'category',
      width: 80
    },
    {
      title: '区域',
      dataIndex: 'areaDistrict',
      key: 'areaDistrict',
      width: 100,
      render: (text, record)=>{
        return `${text} | ${record.businessDistrict}`
      }
    },
    {
      title: '进度',
      dataIndex: 'submitStatus',
      key: 'submitStatus',
      width: 60
    }
  ];

  return columns
}

export default useColumns